<template>
  <div class="c-grid" style="width: 100%; overflow: hidden auto">
    <div
      class="c-grid-container"
      :style="{ display: 'grid', gridTemplateColumns: cols.join(' '), gridGap: gap || '8px', width: '100%' }"
    >
      <template v-if="dataList && dataList.length">
        <div
          class="c-grid-item"
          v-for="(item, index) of dataList"
          :key="item[keyField] || index"
          :style="Object.assign({}, this.itemStyle, { boxSizing: 'border-box', width: '100%' })"
        >
          <slot :scope="item" :index="index" :key="item[keyField]" />
        </div>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CGrid',
  props: {
    gap: undefined,
    column: undefined,
    keyField: undefined,
    dataList: undefined,
    wrapStyle: undefined,
    itemStyle: undefined,
  },
  computed: {
    cols() {
      let num = parseInt(this.column) || 5;
      return Array.apply(null, { length: num }).map(() => '1fr');
    },
  },
};
</script>
